<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="//gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.68.3" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>reter &middot; 我的博客</title>

  
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-0b ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/my_technology_blog/"><h1>我的博客</h1></a>
      <p class="lead">
       杨博的个人博客 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/my_technology_blog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2020. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>reter</h1>
  <time datetime=2019-05-23T00:00:00Z class="post-date">Thu, May 23, 2019</time>
  <h3 id="你好啊">你好啊</h3>
<p>ES6</p>
<pre><code>        {
            // a为局部变量
          let a = 1;
            // b为全局变量
          var b = 2;
        }
            // b不会报错
          console.log(b);
            // a会报错，因为作用域
          console.log(a);
</code></pre>
<p>跳转</p>
<p>router-link</p>
<p><!-- raw HTML omitted -->跳转到hello<!-- raw HTML omitted --></p>
<ul>
<li>
<p>tag:指定渲染成什么标签.</p>
<ul>
<li>默认是<!-- raw HTML omitted --></li>
<li>显示按钮效果：<!-- raw HTML omitted -->hello button<!-- raw HTML omitted --></li>
</ul>
</li>
<li>
<p>replace:不会留下历史记录，浏览器的后退按钮不可用。</p>
<ul>
<li><!-- raw HTML omitted -->hello li<!-- raw HTML omitted --></li>
</ul>
</li>
<li>
<p>按钮跳转
<!-- raw HTML omitted -->跳转到hello<!-- raw HTML omitted --></p>
<pre><code>  methods:{
    handleRouter:function () {
      this.$router.push('/hello')
    }
  }
</code></pre>
<ul>
<li>$router还有一些方法：
<ul>
<li>
<p>replace，跳转后，不会留下历史记录。</p>
</li>
<li>
<p>go,类似于window.history.go(),在history向前或向后多少步，参数是整数。
<!-- raw HTML omitted -->后退<!-- raw HTML omitted -->
<!-- raw HTML omitted -->
<!-- raw HTML omitted -->前进<!-- raw HTML omitted --></p>
<pre><code>  back:function () {
    // 后退2步
    this.$router.go(-2);
  },
  next:function () {
    // 前进1步
    this.$router.go(1);
  }
</code></pre>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ol>
<li>
<p>不带参数</p>
<p><!-- raw HTML omitted -->
<!-- raw HTML omitted --> //name,path都行, 建议用name
// 注意：router-link中链接如果是&rsquo;/&lsquo;开始就是从根路由开始，如果开始不带&rsquo;/'，则从当前路由开始。</p>
</li>
<li>
<p>带参数</p>
<p><!-- raw HTML omitted -->
// params传参数 (类似post)
// 路由配置 path: &ldquo;/home/:id&rdquo; 或者 path: &ldquo;/home:id&rdquo;
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id
<!-- raw HTML omitted -->
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
// html 取参 $route.query.id
// script 取参 this.$route.query.id</p>
</li>
</ol>
<p>vue-router高级用法</p>
<pre><code>// main.js
router.beforeEach((to, from, next)=&gt;{
  let token = window.localStorage.getItem(&quot;token&quot;);
  if(token!=null &amp;&amp; token!=&quot;&quot;)
  {
    // 进入下一个钩子
    next();
  }else{
    // 跳转
    next('/rd');
  }
})


var whitelist = ['Login'];

router.beforeEach((to, from, next)=&gt;{
    console.log('beforeEach');
    // console.log(to);
    console.log(from);
    // next跳转到下一个页面
    // next();

    let token = localStorage.getItem(&quot;token&quot;);
    console.log(to.name);
    console.log(whitelist);
    // 用户访问权限。用户未登录，只可以访问登录页。
    if(whitelist.indexOf(to.name) &gt; -1)
    {
      console.log(&quot;在白名单中！&quot;);
      next();
    }
    // 判断用户登录状态
    else
    {
      console.log(&quot;非白名单！&quot;);
      if(token==null)
      {
        alert('请您登录后访问');
        router.push({name:'Login'})
      }
      else
      {
        next();
      }
    }
});
</code></pre>

</div>


    </main>

    
  </body>
</html>
